<template>
  <Card title="操作记录" v-bind="$attrs">
    <template #extra>
      <a-button type="link" size="small">更多</a-button>
    </template>
    <List item-layout="horizontal" :data-source="logList">
      <template #renderItem="{ item }">
        <ListItem>
          <ListItemMeta>
            <template #description>
              {{ item.operTime }} {{ item.operatorType }} {{ item.operIp }} {{ item.operLocation }}
            </template>
            <!-- eslint-disable-next-line -->
            <template #title> {{ item.title }} <span style="margin:0 10px">{{ item.businessType }}</span>
              <Tag v-if="item.status === '0'" color="processing">成功</Tag>
              <Tag v-if="item.status === '1'" color="error">失败</Tag>
            </template>
            <template #avatar>
              <Icon :icon="item.avatar" :size="30" />
            </template>
          </ListItemMeta>
        </ListItem>
      </template>
    </List>
  </Card>
</template>
<script lang="ts" setup>
  import { Card, List, Tag } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';
  import { onMounted, ref } from 'vue';
  import { getUserOperateLogList } from '@/api/home';

  const ListItem = List.Item;
  const ListItemMeta = List.Item.Meta;

  const logList = ref([]);

  onMounted(() => {
    // 进来后执行查询
    getUserOperateInfoList();
  });

  const getUserOperateInfoList = () => {
    getUserOperateLogList().then((data) => {
      if (data && data.rows) {
        logList.value = data.rows;
      }
    });
  };
</script>
